<template>
    <div class="menu-bar-container">
        <el-radio-group v-model="collapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group>
        <!--
            mode:模式 horizontal / vertical
            background-color:菜单的背景色（仅支持 hex 格式）
            text-color:菜单的文字颜色（仅支持 hex 格式）
            active-text-color:当前激活菜单的文字颜色（仅支持 hex 格式）
            default-active:	当前激活菜单的 index
            default-openeds:当前打开的 sub-menu 的 index 的数组
            collapse:是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）
            collapse-transition:是否开启折叠动画
        -->
        <el-menu
                background-color="#828282"
                text-color="#fff"
                active-text-color="#f4f4f4"
                default-active="111"
                :collapse="collapse"
                :class="collapse?'menu-bar-collapse-width':'menu-bar-width'"
                :collapse-transition="false"
        >
            <child v-for="x in menu" :menu="x" :key="x.index"></child>
        </el-menu>
    </div>
</template>

<script>
    import child from "@/views/element_ui_test/el_menu_tree_test/child";

    export default {
        name: "father",
        components: {child},
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        data() {
            return {
                collapse: false,
                menu: [{
                    index: 1,
                    id: '123123',
                    name: '乌鲁木齐',
                    children: [{
                        index: 11,
                        id: '11',
                        name: '米东1区',
                        children: [{
                            index: 111,
                            id: '111',
                            name: '石化',
                        }, {
                            index: 112,
                            id: '112',
                            name: '米泉',
                        }]

                    }, {
                        index: 12,
                        id: '12',
                        name: '米东2区',
                    }, {
                        index: 13,
                        id: '13',
                        name: '米东3区',
                    }]
                }, {
                    index: 2,
                    id: '42341321231',
                    name: '昌吉',
                    children: [{
                        index: 21,
                        id: '21',
                        name: '昌吉1区',

                    }, {
                        index: 22,
                        id: '22',
                        name: '昌吉2区',
                    }, {
                        index: 23,
                        id: '23',
                        name: '昌吉3区',
                    }]
                }, {
                    index: 3,
                    id: '2348641846',
                    name: '石河子',
                    children: [{
                        index: 31,
                        id: '31',
                        name: '石河子1区',

                    }, {
                        index: 32,
                        id: '32',
                        name: '石河子2区',
                    }, {
                        index: 33,
                        id: '33',
                        name: '石河子3区',
                    }]
                }]
            }
        }
    }
</script>

<style scoped>
    .menu-bar-width {
        width: 200px;
    }

    .menu-bar-collapse-width {
        width: 65px;
    }
</style>